<template>
  <div class="app-container">
    <span style="margin: 10px; width: 70px; text-align: left; display:inline-block;">基本信息</span>
    <el-button type="primary" icon="el-icon-edit" style="margin: 10px;" @click="handleEditBaseInfo()">
      编辑
    </el-button>
    <el-button type="info" icon="el-icon-refresh" style="margin: 10px;" @click="handleRefresh()">
      刷新
    </el-button>
    <el-button type="info" icon="el-icon-circle-close" style="margin: 10px;" @click="handleClose()">
      关闭
    </el-button>
    <el-button type="danger" icon="el-icon-delete" style="margin: 10px;" @click="handleDelete()">
      删除
    </el-button>
    <el-table :data="baseInfoArray" :header-cell-style="headerCellStyle" border stripe element-loading-text="拼命加载中">
      <el-table-column label="用户名" align="center" width="230px">
        <template slot-scope="{row}">
          <span>{{ row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="密码" align="center" width="230px">
        <template slot-scope="{row}">
          <span>{{ row.password }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" min-width="110px">
        <template slot-scope="{row}">
          <span>{{ row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="网关账号类型" align="center" width="110px">
        <template slot-scope="{row}">
          <span>{{ row.type | typeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="50px">
        <template slot-scope="{row}">
          <span>{{ row.status | statusFilter }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="基本信息编辑" :visible.sync="baseInfoEditVisible">
      <el-form ref="baseInfoEditForm" :rules="baseInfoEditRules" :model="baseInfoEdit" label-width="110px" style="width: 600px; margin-left:0px;">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="baseInfoEdit.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="baseInfoEdit.password" />
        </el-form-item>
        <el-form-item label="网关账号类型" prop="type">
          <el-select v-model="baseInfoEdit.type" filterable placeholder="请选择">
            <el-option v-for="item in gatewayAccountTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="baseInfoEdit.status" filterable placeholder="请选择">
            <el-option v-for="item in gatewayAccountStatusOptions" :key="item.key" :label="item.display_name" :value="item.key" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="baseInfoEdit.remark" type="textarea" :rows="2" style="width: 300px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="baseInfoEditVisible = false">取消</el-button>
        <el-button type="primary" @click="baseInfoEditConfirm()">确认</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { Message } from 'element-ui'
import { fetchEnum, getGatewayAccountById, putGatewayAccountById, deleteGatewayAccountById } from '@/api/system-api'
import { toOptionsList, toKeyValueMap } from '@/utils/index'

var gatewayAccountTypeKeyValue = {}
var gatewayAccountStatusKeyValue = {}

export default {
  name: 'SystemGatewayAccountDetail',
  filters: {
    typeFilter(type) {
      return gatewayAccountTypeKeyValue[type]
    },
    statusFilter(status) {
      return gatewayAccountStatusKeyValue[status]
    }
  },
  data() {
    return {
      gatewayAccountTypeOptions: [],
      gatewayAccountStatusOptions: [],
      gatewayAccount: {
        id: null,
        username: null,
        password: null,
        type: null,
        status: null,
        remark: null
      },

      baseInfoArray: null,
      baseInfoEditVisible: false,
      baseInfoEdit: {
        username: null,
        password: null,
        type: null,
        status: null,
        remark: null
      },
      baseInfoEditRules: {
        username: [{
          required: true, message: '请输入用户名', trigger: 'blur'
        }],
        password: [{
          required: true, message: '请输入密码', trigger: 'blur'
        }],
        type: [{
          required: true, message: '请输入网关账号类型', trigger: 'blur'
        }],
        status: [{
          required: true, message: '请输入状态', trigger: 'blur'
        }]
      }

    }
  },
  async created() {
    await this.initLoad()
    await this.loadDetail()
  },
  methods: {
    async initLoad() {
      const enumCodes = ['GATEWAY_ACCOUNT_STATUS', 'GATEWAY_ACCOUNT_TYPE']
      const { data } = await fetchEnum(enumCodes)
      for (const item of data) {
        if (item.code === 'GATEWAY_ACCOUNT_STATUS') {
          if (item.options) {
            this.gatewayAccountStatusOptions = toOptionsList(item.options, 'code', 'name')
            gatewayAccountStatusKeyValue = toKeyValueMap(this.gatewayAccountStatusOptions, 'key', 'display_name')
          }
        } else if (item.code === 'GATEWAY_ACCOUNT_TYPE') {
          if (item.options) {
            this.gatewayAccountTypeOptions = toOptionsList(item.options, 'code', 'name')
            gatewayAccountTypeKeyValue = toKeyValueMap(this.gatewayAccountTypeOptions, 'key', 'display_name')
          }
        }
      }
    },
    loadDetail() {
      getGatewayAccountById(this.$route.params.id).then(response => {
        const { data } = response
        this.gatewayAccount = data
        this.baseInfoArray = null
        if (this.gatewayAccount) {
          this.baseInfoArray = [this.gatewayAccount]
        }
      })
    },

    handleEditBaseInfo() {
      Object.assign(this.baseInfoEdit, this.gatewayAccount)
      this.baseInfoEditVisible = true
    },
    baseInfoEditConfirm() {
      this.$refs.baseInfoEditForm.validate((valid) => {
        if (!valid) {
          return
        }
        var data = JSON.parse(JSON.stringify(this.gatewayAccount))
        data.username = this.baseInfoEdit.username
        data.password = this.baseInfoEdit.password
        data.type = this.baseInfoEdit.type
        data.status = this.baseInfoEdit.status
        data.remark = this.baseInfoEdit.remark
        putGatewayAccountById(this.gatewayAccount.id, data).then(response => {
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          })
          this.baseInfoEditVisible = false
          this.loadDetail()
        }).catch(error => {
          Message({
            message: error,
            type: 'error',
            duration: 5 * 1000
          })
        })
      })
    },
    handleRefresh() {
      this.loadDetail()
    },
    handleClose() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },
    handleDelete() {
      deleteGatewayAccountById(this.gatewayAccount.id).then(response => {
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.handleClose()
      }).catch(error => {
        Message({
          message: error,
          type: 'error',
          duration: 5 * 1000
        })
      })
    },
    headerCellStyle({ row, rowIndex }) {
      return 'background-color: #42b983; color: #FFF;'
    }

  }
}

</script>
